<template>
  <div id="bookmark">
    <div style="text-align: right">
      <el-button
        style="margin: 10px 20px 10px 10px;"
        size="small"
        type="primary"
        round
        @click="addBookMark"
      >添加书签</el-button>
    </div>
    <div style="position:relative;height: calc(100% - 60px)">
      <el-scrollbar class="page-component__scroll">
        <div
          v-for="(item,index) in bookmarks"
          :key="index"
          class="layer-arguments"
          @click="locateTo(item)"
        >
          <div class="bookmark-item">
            <a class="kfb-icon-yingyong" />
            <span>&nbsp;{{ item.name }}&nbsp;&nbsp;&nbsp;</span>
          </div>
          <a class="bookmarkEdit el-icon-delete" @click.stop="handleDelete(item)" />
          <a class="bookmarkEdit el-icon-edit-outline" @click.stop="handleEdit(item)" />
        </div>
      </el-scrollbar>
    </div>

    <!--添加书签-->
    <el-dialog
      :visible="dialogFormVisible"
      :close-on-click-modal="false"
      title="添加书签"
      width="400px"
      append-to-body
      @close="dialogFormVisible= false,isAdd = true"
    >
      <el-form>
        <el-form-item label="书签名称" label-width="80px">
          <el-input
            ref="book_input"
            v-model="form.name"
            autocomplete="off"
            size="small"
            @keyup.enter.native="handleConfirm"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" size="mini" @click="handleConfirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { add, remove, update, list } from "@/api/bookmark";
import { mapState } from "vuex";
import Clone from "@/utils/clone";

export default {
  name: "BookMark",
  data() {
    return {
      bookmarks: [], // 书签数据
      dialogFormVisible: false,
      form: {
        name: ""
      },
      isAdd: false
    };
  },
  methods: {
    /**
     * 编辑书签
     * @param item
     */
    handleEdit(item) {
      this.form = Clone.clone(item);
      this.dialogFormVisible = true;
      this.isAdd = false;
    },

    /**
     * 添加书签
     */
    addBookMark() {
      this.isAdd = true;
      this.dialogFormVisible = true;
      this.$nextTick(function() {
        this.$refs["book_input"].focus();
      });
      const map = this.mapServiceRight.getMap();
      const camera = {
        center: map.getCenter(),
        zoom: map.getZoom(),
        bear: map.getBearing(),
        pitch: map.getPitch()
      };
      this.form = {
        uid: this.$store.getters.id,
        camera: camera,
        type: 0,
        name: ""
      };
    },
    /**
     * 书签定位
     * @param item
     */
    locateTo(item) {
      const map = this.mapServiceRight.getMap();
      map.flyTo({
        center: item.camera.center,
        zoom: item.camera.zoom,
        bearing: item.camera.bear,
        pitch: item.camera.pitch,
        duration: 3000,
        speed: 0.2,
        curve: 1
      });
    },
    /**
     * 获取书签列表
     */
    getBookMarks() {
      list({
        type: 0,
        uid: this.$store.getters.id
      }).then(res => {
        this.bookmarks = res.data;
      });
    },
    /**
     * 提交
     */
    handleConfirm() {
      if (this.isAdd) {
        add(this.form).then(res => {
          this.bookmarks.push(res.data);
          this.dialogFormVisible = false;
        });
      } else {
        update(this.form).then(res => {
          const index = this.bookmarks.findIndex(o => o._id === this.form._id);
          this.bookmarks.splice(index, 1, this.form);
          this.dialogFormVisible = false;
        });
      }
    },
    /**
     * 删除书签
     * @param item
     */
    handleDelete(item) {
      this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          remove(item).then(res => {
            this.bookmarks.splice(this.bookmarks.indexOf(item), 1);
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  },
  computed: {
    ...mapState({
      // 地图模块控件
      mapModuleIndex(state) {
        return state.xcgl.mapModuleIndex;
      },

      mapServiceLeft(state) {
        return state.xcgl.mapServiceLeft;
      },
      mapServiceRight(state) {
        return state.xcgl.mapServiceRight;
      },
      /**
       * 比较
       * @param state
       * @returns {comparable|(function(*))|*}
       */
      comparable(state) {
        return state.xcgl.comparable;
      },
      sceneViewer(state) {
        return state.xcgl.sceneViewer;
      }
    }),
    // 书签是否有数据
    hasData() {
      return this.bookmarks.length > 0;
    }
  },
  mounted() {
    this.getBookMarks();
  }
};
</script>

<style>
.page-component__scroll {
  height: 100%;
}

.page-component__scroll .el-scrollbar__wrap {
  overflow-x: auto;
}
</style>

<style scoped>
#bookmark {
  height: 100%;
}

#bookmark .layer-arguments {
  margin: 10px 0;
  height: 44px;
  line-height: 44px;
  padding: 4px;
  cursor: pointer;
  color: #fff;
  font-size: 18px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
  padding: 1em;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center; /*垂直居中*/
}

#bookmark .layer-arguments:hover {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.5);
}

.bookmarkDel {
  float: right;
  color: #f44336;
  font-size: 17px;
}

.bookmark-item {
  flex: 1;
}

.bookmark-item a {
  font-size: 20px;
  color: red;
}

.bookmarkEdit {
  color: #fff;
  font-size: 20px;
  margin: 0 4px;
}
</style>
